<script setup>
import { aliPay, getOrderDetail } from '@/apis/order';
import { onBeforeUnmount, onMounted, ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const orderId = ref('')
const orderInfo = ref({})
const countdown = ref(100)

watch(
  () => route.params.id,
  async (newId, oldId) => {
    orderId.value = newId
    const orderResult = await getOrderDetail(newId)
    orderInfo.value = orderResult
    countdown.value = orderResult.countdown
  },
  { immediate: true }
)
let countdownTime = null
onMounted(() => {
  countdownTime = setInterval(() => {
    if (countdown.value > 1) {
      countdown.value -= 1
    } else {
      clearInterval(countdownTime)
    }
  }, 1000);
})
onBeforeUnmount(() => {
  clearInterval(countdownTime)
})
const mm = computed(() => String(Math.floor(countdown.value / 60)).padStart(2, '0'))
const ss = computed(() => String(countdown.value % 60).padStart(2, '0'))
//支付
const goPay = async (event) => {
  const li = event.currentTarget
  li.classList.add('choose')

  const backURL = 'http://127.0.0.1:5173/paycallback'
  const redirectUrl = encodeURIComponent(backURL)
  window.open(`http://pcapi-xiaotuxian-front-devtest.itheima.net/pay/aliPay?orderId=${orderId.value}&redirect=${redirectUrl}`, '_blank')

}
</script>

<template>
  <div class="pay w">
    <el-card>
      <div class="card" style="width: 100%;">
        <span class="iconfont icon-duihao2"></span>
        <div class="tips">
          <p>订单提交成功！请尽快完成支付。</p>
          <span>支付还剩</span>
          <span v-if="mm > 0">{{ mm }}分</span>
          <span>{{ ss }}秒</span>
          <span> ，超时后将取消订单</span>
        </div>
        <div>
          <span>应付金额：</span>
          <span class="price">￥{{ orderInfo.totalMoney }}</span>
        </div>
      </div>

    </el-card>
    <el-card class="bank">
      <div class="banking">
        <p>选择以下支付方式付款</p>
        <div class="pay-channel">
          <p>支付平台</p>
          <ul>
            <li>
              <svg t="1762925306944" class="icon" viewBox="0 0 3559 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1542" width="200" height="200">
                <path
                  d="M416.914286 646.095238c-17.066667 9.752381-41.447619 2.438095-51.2-14.628571l-2.438096-4.876191-104.838095-231.619047c0-2.438095-2.438095-4.87619-2.438095-7.314286 0-4.87619 2.438095-9.752381 4.87619-14.628572 2.438095-2.438095 7.314286-4.87619 14.628572-4.87619 4.87619 0 7.314286 2.438095 12.190476 4.87619l121.904762 87.771429c14.628571 9.752381 34.133333 12.190476 51.2 4.87619L1041.066667 204.8C936.228571 80.457143 765.561905 0 572.952381 0 256 0 0 216.990476 0 482.742857c0 146.285714 78.019048 275.504762 197.485714 365.714286 9.752381 7.314286 17.066667 19.504762 17.066667 31.695238 0 4.87619 0 7.314286-2.438095 12.190476l-26.819048 97.52381c-2.438095 4.87619-2.438095 9.752381-2.438095 14.628571 0 9.752381 9.752381 19.504762 19.504762 19.504762 4.87619 0 7.314286-2.438095 12.190476-2.438095l124.342857-73.142857c9.752381-4.87619 19.504762-9.752381 29.257143-9.752381 4.87619 0 12.190476 0 17.066667 2.438095 60.952381 17.066667 124.342857 26.819048 187.733333 26.819048 316.952381 0 572.952381-216.990476 572.952381-482.742858 0-80.457143-21.942857-156.038095-65.828572-224.304762l-658.285714 385.219048h-4.87619z"
                  fill="#00B700" p-id="1543"></path>
                <path
                  d="M1443.352381 424.228571c-24.380952 60.952381-58.514286 119.466667-99.961905 168.228572l14.628572 26.819047c17.066667-19.504762 34.133333-41.447619 48.761904-63.390476v243.809524h26.819048V514.438095c12.190476-24.380952 24.380952-48.761905 36.571429-75.580952l-26.819048-14.628572z m26.819048-129.219047l-24.380953-14.628572c-24.380952 51.2-56.07619 97.52381-97.523809 136.533334l14.628571 26.819047c46.32381-41.447619 80.457143-92.647619 107.276191-148.723809z m214.552381 365.714286l-43.885715 36.571428v-107.27619h-138.971428V633.904762c4.87619 58.514286-9.752381 99.961905-43.885715 124.342857l14.628572 26.819048c39.009524-34.133333 58.514286-80.457143 56.07619-138.971429v-26.819048h85.333334V682.666667c0 21.942857-2.438095 29.257143-9.752381 39.009523l17.066666 29.257143c14.628571-12.190476 39.009524-34.133333 75.580953-65.828571l-12.190476-24.380952zM1494.552381 536.380952h165.790476v-26.819047h-165.790476V536.380952z m177.980952-207.238095h-26.819047v97.52381h-53.638096v-138.971429h-26.819047v138.971429H1511.619048v-97.52381h-26.819048v124.342857h187.733333v-124.342857z m585.142857 21.942857l21.942858-12.190476c-4.87619-9.752381-21.942857-48.761905-29.257143-60.952381l-24.380953 14.628572c9.752381 17.066667 17.066667 34.133333 26.819048 51.2 0 2.438095 2.438095 4.87619 2.438095 7.314285H2072.380952v29.257143h368.152381v-29.257143h-182.857143zM1918.780952 536.380952l14.628572 26.819048c17.066667-26.819048 36.571429-56.07619 53.638095-90.209524v329.142857h26.819048V414.47619c17.066667-39.009524 31.695238-78.019048 46.323809-119.466666l-26.819047-14.628572c-21.942857 90.209524-60.952381 177.980952-114.590477 256z m219.428572 121.904762h234.057143v114.590476h-234.057143V658.285714z m-26.819048 141.409524h290.133334V633.904762H2111.390476v165.790476z m-9.752381-243.809524h304.761905v-29.257143H2101.638095v29.257143z m0-87.771428h304.761905v-26.819048H2101.638095v26.819048z"
                  fill="#394144" p-id="1544"></path>
                <path
                  d="M3198.780952 273.066667c-34.133333 92.647619-87.771429 180.419048-146.285714 241.371428l12.190476 29.257143v2.438095c26.819048-26.819048 48.761905-56.07619 68.266667-85.333333v341.333333h26.819048V416.914286c24.380952-43.885714 46.32381-87.771429 63.390476-134.095238l-24.380953-9.752381z m-580.266666 251.123809h277.942857c-31.695238 65.828571-80.457143 114.590476-141.409524 153.6-58.514286-36.571429-104.838095-90.209524-136.533333-153.6z m319.390476-14.628571l-17.066667-12.190476h-151.161905v-102.4h224.304762V365.714286h-224.304762v-97.52381h-26.819047v97.52381h-224.304762v29.257143h224.304762v102.4h-151.161905v26.819047c31.695238 68.266667 80.457143 126.780952 141.409524 168.228572-68.266667 39.009524-146.285714 63.390476-226.742857 78.019047l7.314285 26.819048v2.438095c87.771429-17.066667 173.104762-46.32381 243.809524-87.771428 68.266667 43.885714 148.72381 70.704762 243.809524 85.333333v-2.438095l7.314286-24.380953c-87.771429-12.190476-163.352381-39.009524-226.742857-75.580952 65.828571-43.885714 121.904762-104.838095 156.038095-185.295238z m319.390476 4.87619c31.695238 48.761905 70.704762 112.152381 87.771429 151.161905l24.380952-17.066667c-19.504762-34.133333-58.514286-99.961905-90.209524-146.285714l-21.942857 12.190476z m-1438.47619-104.838095c-4.87619 92.647619-21.942857 165.790476-46.32381 219.428571-19.504762-48.761905-31.695238-112.152381-41.447619-195.047619 2.438095-9.752381 7.314286-17.066667 9.752381-26.819047l78.019048 2.438095zM1779.809524 280.380952h-26.819048c-19.504762 85.333333-46.32381 158.47619-80.457143 216.990477l17.066667 29.257142 12.190476-24.380952c4.87619-9.752381 9.752381-17.066667 12.190476-24.380952 7.314286 78.019048 24.380952 138.971429 46.32381 182.857143-19.504762 36.571429-51.2 73.142857-92.647619 109.714285l14.628571 26.819048c43.885714-41.447619 75.580952-78.019048 90.209524-109.714286 24.380952 41.447619 51.2 78.019048 85.333333 109.714286l14.628572-26.819048c-36.571429-36.571429-68.266667-75.580952-85.333333-109.714285 31.695238-58.514286 51.2-141.409524 58.514285-253.561905h29.257143v-26.819048h-121.904762c9.752381-29.257143 21.942857-68.266667 26.819048-99.961905z"
                  fill="#394144" p-id="1545"></path>
                <path
                  d="M3481.6 402.285714v-126.780952h-26.819048v126.780952h-238.933333v29.257143h238.933333V755.809524c0 14.628571-4.87619 17.066667-17.066666 17.066666-9.752381 0-21.942857 2.438095-51.2 2.438096v24.380952c41.447619 0 53.638095 0 68.266666-4.87619 17.066667-4.87619 26.819048-14.628571 26.819048-41.447619V429.104762h78.019048v-26.819048h-78.019048z"
                  fill="#394144" p-id="1546"></path>
              </svg>
            </li>
            <li class="" @click="goPay">
              <svg t="1762925345870" class="icon" viewBox="0 0 3411 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1691" width="200" height="200">
                <path
                  d="M248.886419 555.303925c-25.623712 2.549033-73.699664 13.841843-99.975455 37.049902-78.91629 68.468218-31.625796 193.696885 127.777701 193.696885 92.624754 0 185.249508-59.116823 257.985875-153.638532-103.191386-50.387866-190.910733-86.44483-285.788121-77.063795z m594.87322 86.56339c147.562348 49.291189 181.010999 51.869862 181.010999 51.869862V163.908765A163.893945 163.893945 0 0 0 860.876693 0h-696.982748A163.893945 163.893945 0 0 0 0 163.908765v694.492995a163.893945 163.893945 0 0 0 163.893945 163.893945h696.804909a163.893945 163.893945 0 0 0 163.893944-163.893945v-6.743082s-266.536992-110.779206-401.176334-175.305315c-90.26838 110.719926-206.753271 177.987727-327.787889 177.987728C91.172398 854.326271 21.726062 675.923585 118.559685 558.430937c21.118444-25.549612 57.056848-50.017367 112.79472-63.725831 87.171008-21.370383 225.9303 13.337965 355.960635 56.152831a710.913512 710.913512 0 0 0 57.797846-140.641427H244.321871v-40.532592h206.397592v-72.854926H200.988306v-40.013894h250.220215v-103.650805a17.176334 17.176334 0 0 1 17.783953-17.428274h101.012852v121.049439h247.493343v40.488132h-247.493343v72.840107h201.951603a822.952414 822.952414 0 0 1-85.525992 215.437768c61.310177 22.096561 116.307051 42.977886 157.343522 56.760449z m0 0"
                  fill="#25ABEE" p-id="1692"></path>
                <path
                  d="M2940.05789 126.814403h332.293158v65.800625h118.678245v-77.952993a1.793215 1.793215 0 0 1 0-0.489058 31.610976 31.610976 0 0 0-30.721779-31.981475h-192.125969V20.881325H3044.019914v61.310177h-222.595808v110.408706h118.663424zM2136.119486 26.52773l-121.642237 287.788815h93.365752v342.430011h102.094709V202.499942h-37.035082l76.915596-175.972212z m1231.227509 488.599282a19.369689 19.369689 0 0 0-18.213731-13.901123h-98.952877l28.646984 96.759523H3162.579599V410.601829h228.123654v-44.563621H3162.579599v-88.208406h228.123654v-44.608081h-569.368067v44.622901h228.123654V366.053028h-228.064374v44.622901h228.123654v187.324303h-228.123654v44.622901h583.29883l-0.489058-1.481996h0.489058z m-970.144263-252.709969a23.711937 23.711937 0 0 0-20.999884-13.337965h-88.386245l68.838717 216.756745h104.525182z m0 0"
                  fill="#3F3A39" p-id="1693"></path>
                <path
                  d="M2620.895218 31.744356h-106.110918v110.912585h-261.438925v44.608082h261.438925v398.508741a18.213732 18.213732 0 0 1-17.117054 16.687276H2443.811509v46.193817h137.484774a41.881209 41.881209 0 0 0 39.598935-41.31805V187.205743h43.096446V142.656941h-43.096446z m-731.824476 583.165451a1257.45884 1257.45884 0 0 1-233.829339-111.446104c87.348848-64.644668 163.893945-152.423295 194.245224-269.827024h-203.596619v-72.825286H1882.135001V115.210374h-236.244993V22.70418h-105.32546a21.237004 21.237004 0 0 0-20.881325 21.607502v70.898692h-234.599977v45.467639h234.614797v72.840107H1321.673729v45.467639h394.566632s-21.859442 85.348153-130.015514 177.06889c-97.130022-73.210606-129.363436-131.66053-129.363437-131.660531h-105.992358c42.800046 74.099803 103.621165 133.542665 169.110571 180.80352-60.2135 39.065416-138.210953 76.767396-239.090425 106.926016v54.641195a1067.555864 1067.555864 0 0 0 306.121107-118.011347 1095.906449 1095.906449 0 0 0 302.060437 117.759408z m-490.422137 135.069121l-97.130022 264.121338h49.409749l18.213731-53.174018h97.130022l17.591293 53.174018h49.409749l-97.115202-264.121338z m-17.606113 177.617228l37.879819-109.26757L1455.320134 927.596156zM1797.661225 749.978928h-47.423874v264.121338h159.892555v-35.938404H1797.661225z m347.394697 0h47.527614v264.121338h-47.527614z m403.428969 0h-102.598588v264.121338h47.423874v-101.739029h55.174714c51.232604 0 86.993169-33.448651 86.993169-81.287485s-35.760565-81.094825-86.993169-81.094824z m-2.667593 126.310524h-52.507121v-90.40176h52.507121c26.33507 0 42.133148 23.074679 42.133148 45.34908s-14.819961 45.03786-42.073868 45.03786z m361.36992-126.310524l-97.130022 264.106518h49.409749l18.213731-53.174018h97.130022l17.606113 53.174018h49.409749L2944.726178 749.978928z m-17.783953 177.617228l37.879819-109.26757 36.427464 109.26757z m417.448651-177.617228l-51.869862 112.542781-52.62568-112.542781h-51.291884l79.953688 155.609587v108.482111H3278.175292v-108.482111l0.31122-0.607619L3358.20308 749.978928z m0 0"
                  fill="#3F3A39" p-id="1694"></path>
              </svg>
              <span class="badge">
                推荐
              </span>
            </li>
          </ul>
        </div>
        <div class="pay-channel">
          <p>支付方式</p>
          <ul>
            <li>招商银行</li>
            <li>工商银行</li>
            <li>建设银行</li>
            <li>农业银行</li>
            <li>交通银行</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>



<style lang="scss" scoped>
.choose {
  border: 2px solid #ccc !important;
  background-color: #e4e4e4;
}

.pay {
  margin-top: 5px;

  .card {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 20px;
    padding-left: 100px;

    .iconfont {
      font-size: 60px;
      color: #1abf6e;
    }

    .tips {
      span {
        font-size: 12px;
        color: rgb(170, 170, 170);
      }
    }

    .price {
      color: red;
    }
  }

  .bank {
    margin-top: 10px;
    margin-bottom: 40px;
    padding-bottom: 50px;
  }

  .banking {
    p {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid rgb(247, 242, 242);
    }

    .pay-channel {
      p {
        border-bottom: none;
      }

      ul {
        display: flex;
        gap: 20px;

        li {
          width: 140px;
          height: 40px;
          position: relative;
          line-height: 40px;
          text-align: center;
          border: 1px solid rgb(170, 170, 170);

          .badge {
            height: 14px;
            width: 25px;
            position: absolute;
            right: 5px;
            top: 20px;
            transform: translateY(-7px);
            display: inline-block;
            font-size: 10px;
            line-height: 14px;
            color: white;
            background-color: #b75441;
          }

          .icon {
            width: 70px;
            height: 40px;
          }
        }
      }
    }
  }
}
</style>
